<template>
	<view class="main">
		<view class="calendar">
			<uni-calendar :insert="true" @change="change" @confirm="confirm" :start-date="startDate"/>
		</view>
			<view class="divider"></view>
			<view class="time">
				<!-- 展示是根据上午和下午是否展示的 -->
				<block>
					<view class="time-nav" v-if="timeNav.length>0">
						<view
							class="time-nav-item"
							v-for="(item, index) in timeNav"
							:key="item.id"
							:class="index == navActIndex ? 'time-nav-item-act' : ''"
							@click="changTime(index)"
						>
							<view class="time-nav-bar"></view>
							<text>{{ item.title }}</text>
						</view>
					</view>
				</block>

				<view class="time-list">
					<view class="time-list-c" v-if="timeNav[navActIndex].isShow">
						<block v-for="(item, index) in timeNav[navActIndex].list">
							<view class="time-list-item" :class="item.choose? 'time-list-item-act' : ''" v-if="item.status == 0" @click="selectTime(item.time,index)">{{ item.time }}</view>
						</block>
					</view>
					<view class="no-time" v-else>当前暂无可预约时间</view>
				</view>
		</view>
	</view>
</template>
<script>
import uniCalendar from '@/components/uni-ui/uni-calendar/uni-calendar.vue';
export default {
	components: {
		uniCalendar,
	},
	data() {
		return {
			timeNav: [],
			navActIndex: 0,
			choose: false,
			selectDate:'', //选中的日期
			startDate:'',//今日日期 2021-1-6 
			hasSelectedToday:'',//今日日期的选中的格式 2021-01-06
			flagDate:''
		};
	},
	computed: {
		chooseStyle() {
			return 'color:blue';
		}
	},
	onLoad() {
		
	},
	onShow() {
		let now=new Date()
		let year=now.getFullYear() //年
		let month=now.getMonth()+1 //月
		let day=now.getDate() //日
		
		this.startDate=year+'-'+month+'-'+day //今日日期格式是 - 拼接的
		this.selectDate=year+'年'+month+'月'+day+'日'
		
		
		let month1=month <9 ? '0'+month:month
		let day1=day<9? '0'+day:day
		this.hasSelectedToday=year+'-'+month1+'-'+day1
		
		this.initTime(true);
	
		// console.log(this.hasSelectedToday,'当前日期');
	},
	mounted() {
	},
	methods: {
		// 初始化时间列表，到时候封装下
		initTime(today) {
			/* 
					思路：根据上午下午时间段划分，到时候是只展示对应时间段的timeList还是上午下午直接写死？
					
					把时间段分为上午和上午，前12个是上午的，后12个是下午的，获取当前时间，只显示可选时间，并设置可选的样式即可。
				 */
			let now = new Date(); //获取当前日期
			let nowTime = now.getTime(); //获取当前日期的时间戳
			let result = [];
			// 14 26 38

			console.log(nowTime, '当前时间戳是', new Date(nowTime).getHours());
			/* 在这里只展示可选择的时间列表 */
			for (let i = 0; i < 2; i++) {
				let list = [];
				for (let j = 14; j < 43; j++) {
					let value;
					// 这只是对应半个小时的时间戳
					value = nowTime - (nowTime % (24 * 60 * 60 * 1000)) + j * 1800 * 1000 - 8 * 3600 * 1000;

					let hour = new Date(value).getHours() < 10 ? '0' + new Date(value).getHours() : new Date(value).getHours();
					let min = new Date(value).getMinutes() < 10 ? '0' + new Date(value).getMinutes() : new Date(value).getMinutes();
					let status = 0; //0代表可以选择，1代表不可选择了

					//服务提前一个小时，只有在当天的时候才有,只有今天
					if(today){
						let number = value - 1 * 60 * 60 * 1000;
						if (nowTime > number) {
							status = 1;
						}
					}
					// 上午
					if (i == 0) {
						if (j < 26 || j > 43) {
							list.push({
								value: value,
								time: hour + ':' + min,
								status: status,
								choose: false //是否选择
							});
						}
					} else {
						// 下午
						if (j < 14 || j > 25) {
							list.push({
								value: value,
								time: hour + ':' + min,
								status: status,
								choose: false //是否选择
							});
						}
					}
				}

				// 这里判断是否展示上午或者下午
				result[i] = {
					title: i == 0 ? '上午' : '下午',
					id: i,
					list: list,
					isShow: list.every(el => el.status == 1) ? false : true //每一项都是不可选的时候上午下午就不可以选了
				};
			}
			// console.log(result, '时间列表是');
			this.timeNav = result;
		},
		change(e) {
			this.navActIndex=0
			// 同一日期重复点击
			if(this.flagDate==e.fulldate) return
			
			// 选中的是今天
			if(this.hasSelectedToday==e.fulldate){
				this.initTime(true)
			}else{
				this.initTime()
			}
			this.flagDate=e.fulldate
			this.selectDate=e.year+'年'+e.month+'月'+e.date+'日'
		},
		confirm(e) {
			// console.log(e);
		},
		// 选择上午下午
		changTime(index) {
			this.navActIndex = index;
		},
		// 选择具体时间
		selectTime(time,index) {
			let list = this.timeNav[this.navActIndex].list; //时间列表
			list.forEach(el => (el.choose = false));

			list[index].choose = true;
			
			let date=this.selectDate +', '+this.timeNav[this.navActIndex].title+time
			
			let data={
				time:date,
				scheduleTime:(this.flagDate+' '+time+':00').replace(/-/g,'/')
			}
		
			uni.$emit('selectTime',data)
				uni.navigateBack({
					delta:1
				})
		}
	}
};
</script>

<style lang="less">
.time {
	display: flex;
	height: calc(100vh - 323px);
	// background-color: red;
	.time-nav {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.38);
		height: 100%;
		background: #fafafb;
		.time-nav-item {
			width: 138rpx;
			height: 124rpx;
			display: flex;
			align-items: center;
			background: rgba(250, 250, 251, 0);
			text {
				margin-left: 38rpx;
			}
			.time-nav-bar {
				width: 8rpx;
				height: 74rpx;
				background:rgba(250, 250, 251, 0);
				border-radius: 4rpx;
			}
		}

		// 导航激活
		.time-nav-item-act {
			color: rgba(0, 0, 0, 0.87);
			background-color: #ffffff;
			.time-nav-bar {
				background: #3C8EFF;
			}
		}
	}

	// 时间列表
	.time-list {
		flex: 1;
		padding: 32rpx 40rpx;
		.no-time {
			margin-left: 110rpx;
			margin-top: 134rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.38);
		}

		.time-list-c {
			font-weight: 400;
			font-size: 32rpx;
			background-color: #ffffff;
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;

			.time-list-item {
				width: 258rpx;
				height: 72rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #fafafb;
				color: rgba(0, 0, 0, 0.1);
				margin-bottom: 16rpx;
			}
			// 选择时间
			.time-list-item-act {
				color: #ffffff;
				background: #3C8EFF;
				border-radius: 20rpx;
			}
		}

		.time-list-item:nth-child(2n) {
			margin-left: 16rpx;
		}
	}
}
</style>

